<template>
  <div id="wisdomPark-section-v4">
    <MyHeadline title="自然灾害灾情" :islink="false" />
    <MyCell>
      <div class="content">
        <div class="title">
          <div class="left">一键求助</div>
          <div class="right">09：11：15</div>
        </div>
        <div class="item">报警设施：智能灯杆06</div>
        <div class="item">补充说明：公园北门10米处</div>
        <div class="btn-box">
          <div class="btn-v1">查看录像</div>
          <div class="btn-v2">现场处理</div>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="left">一键求助</div>
          <div class="right">09：11：15</div>
        </div>
        <div class="item">报警设施：智能灯杆06</div>
        <div class="item">补充说明：公园北门10米处</div>
        <div class="btn-box">
          <div class="btn-v1">查看录像</div>
          <div class="btn-v2">现场处理</div>
        </div>
      </div>
    </MyCell>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { deepCopy } from '@/utils/utils'
import HtEcharts from '@/base-ui/echarts/index'
import MyCell from '@/components/my-cell/index.vue'
import MyHeadline from '@/components/my-headline/index.vue'

import echartsConfig from '../config/wisdomPark-section-v4/echarts-config'
// ========================= 实例

// ========================= 钩子
onMounted(() => {
  echarts_init()
})

// ========================= 数据
// 初始化
const echarts_init = () => {
  onEcharts_data(5)
}

// echarts 配置
const echarts_options = ref(deepCopy(echartsConfig))

// ========================= 函数
// 随机数
const getRandomInt = (min: number, max: number): number => {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min
}

// echartsv3数据
const onEcharts_data = (num: number) => {
  const seriesData: any = [
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: 'rgba(0,0,0,0)',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'outside'
        // position: 'center'
      },
      // labelLine: {
      //   show: false
      // },
      data: [
        { value: 0, name: '受灾人口' },
        { value: 0, name: '因灾死亡人口' },
        { value: 0, name: '因灾失踪人口' },
        { value: 0, name: '紧急转移避险人口' },
        { value: 0, name: '紧急转移安置人口' }
      ]
    }
  ]
  for (let i = 0; i < num; i++) {
    seriesData[0].data[i].value = getRandomInt(50, 200)
  }
  echarts_options.value.series = seriesData
}

// ========================= 请求

defineExpose({
  echarts_init
})
</script>

<style scoped lang="less">
#wisdomPark-section-v4 {
  .width_height(100%,100%);
  .content {
    // .width_height(100%,200px);
    width: 100%;
    box-sizing: border-box;
    padding: 0 @space_20 @space_20 @space_20;
    .title {
      .D_J_A(space-between, center);
      margin-bottom: 10px;
      width: 100%;
      .left {
        .font-S-W-C(14px,600,#BD3124);
      }
      .right {
        .font-S-W-C(14px,400,#fff);
      }
    }
    .item {
      .font-S-W-C(14px,400,#fff);
      margin-bottom: 10px;
    }
    .btn-box {
      display: flex;
      .btn-v1 {
        background-image: linear-gradient(to right, #c4e4db78, #91ceb9bc);
        .font-S-W-C(14px,400,#fff);
        border-radius: 20px;
        padding: 5px 10px;
        cursor: pointer;
      }
      .btn-v2 {
        background-image: linear-gradient(to right, #de868f5d, #bd3124c8);
        .font-S-W-C(14px,400,#fff);
        border-radius: 20px;
        padding: 5px 10px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
